<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script
	src="${pageContext.request.contextPath}/resource/bootstrap-treeview/js/bootstrap-treeview.js"></script>
<link
	href="${pageContext.request.contextPath}/resource/bootstrap-treeview/css/bootstrap-treeview.css"
	rel="stylesheet">
<title>添加spu页面</title>
</head>
<body>
	<form id="addForm">
	
		<input type="hidden" name="id" value="${spu.id }">
		<div class="form-group row">
			
			<label for="parentName" class="col-sm-2 col-form-label">商品名称</label>
			<div class="col-sm-10">
				<input type="text" name="goodsName" class="form-control" value="${spu.goodsName }"
					style="width: 500px" id="parentName">
			</div>
		</div>
		<div class="form-group row">
			<label for="catPath" class="col-sm-2 col-form-label">标题</label>
			<div class="col-sm-10">
				<input type="text"  class="form-control" name="caption" value="${spu.caption }"
					style="width: 500px" id="catPath">
			</div>
		</div>



		<!-- 隐藏域,为了提交分类id的 -->
		<input type="hidden" name="categoryId" id="categoryId" value="${spu.categoryId }">
		<div class="form-group row">
			<label for="catName" class="col-sm-2 col-form-label">分类</label>
			<div class="col-sm-10">
				<input type="text" readonly class="form-control" value="${spu.category.name }"
					  style="width: 500px" id="catId">
				<button type="button"
					style="position: fixed; top: 244px; right: 300px"
					class="btn btn-primary" onclick="showCat()">选择分类</button>
			</div>
		</div>


		<!-- 这里就是现实分类树的地方 -->
		<div class="form-group row">
			<div class="col-sm-10" id="tree"
				style="display: none; position: absolute; z-index: 1000; width: 90%">
			</div>
		</div>

		<div class="form-group row">
			<legend class="col-form-label col-sm-2 pt-0">是否上架</legend>
			<div class="col-sm-10">
				<div class="form-check">
					<input class="form-check-input" type="radio" name="isMarketable"
						id="gridRadios1" value="1" ${spu.isMarketable==1?'checked':'' } > <label
						class="form-check-label" for="gridRadios1"> 上架 </label>
				</div>
				<div class="form-check">
					<input class="form-check-input" type="radio" name="isMarketable" ${spu.isMarketable==0?'checked':'' }
						id="gridRadios2" value="0"> <label
						class="form-check-label" for="gridRadios2"> 不上架 </label>
				</div>
			</div>
		</div>

		<div class="form-group row">
			<label for="exampleFormControlSelect1"
				class="col-sm-2 col-form-label">品牌</label> <select
				style="width: 500px" name="brandId" class="form-control"
				id="exampleFormControlSelect1">
				<option value="0">请选择</option>
				<c:forEach items="${brands }" var="b">
					<option value="${b.id}" ${b.id==spu.brandId?"selected":'' }>${b.name }</option>
				</c:forEach>

			</select>
		</div>
		<input type="hidden" value="${spu.smallPic }" name="smallPic">
		<div class="form-group">
			<input type="file" name="picFileName" class="form-control-file"
				id="exampleFormControlFile1">
				<span><img src="/pic/${spu.smallPic }" width="50px" height="50px"></img></span>
		</div>
		<button type="button" class="btn btn-primary" onclick="updateSpu()">修改</button>
	</form>

</body>

<script type="text/javascript">

//添加spu
function updateSpu(spuId){
	var formData = new FormData($("#addForm")[0]);
	$.ajax({
		url:'./spu/update',
		type:'post',
		data:formData,
		processData:false,
		contentType:false,
		success:function(resp){
			if(resp){
				alert("success!!!")
				$("#workArea").load("./spu/list")
			}else{
				alert("fail!!!!!!!")
			}
		}
	})
}


	//添加spu
	function addSpu(){
		var formData = new FormData($("#addForm")[0]);
		$.ajax({
			url:'./spu/add',
			type:'post',
			data:formData,
			processData:false,
			contentType:false,
			success:function(resp){
				if(resp){
					alert("success!!!")
					$("#workArea").load("./spu/list")
				}else{
					alert("fail!!!!!!!")
				}
			}
		})
	}
	
	function showCat() {
		//显示树
		$("#tree").show();
	}

	initTree();//初始化tree
	function initTree() {
		$.post("./cat/getTree", {}, function(data) {
			//树的加载
			$('#tree').treeview({
				data : data, // data is not optional
				levels : 2,
				onNodeSelected : function(event, data) {
					// 再这里不仅会触发选中节点事件,还能拿到data中的节点数据

					if(data.nodes.length==0){
						//隐藏树
						$("#tree").hide();
						$("#categoryId").val(data.id);
						$("#catId").val(data.text)
					}
				}
			});

		})

	}
</script>
</html>